import React, { Component } from "react";
import "./GuanQia.css";
import Obj from "./utils/createObj";
import man1 from "../static/imgs/man1.png";
import man2 from "../static/imgs/man2.png";
import leftHook from "../static/imgs/leftHook.png";
import rightHook from "../static/imgs/rightHook.png";

const windowsHeight = 720;
const windowsWidth = 1024;

class GuanQia extends Component {
    constructor(props) {
        super(props);
        this.state = {
            windowsScale: 1,
            showCollisionBox: false,
        };
    }

    componentDidMount() {
        this.setState(() => {
            return {
                objs: {
                    objMan: {
                        name: "老头",
                        positionX: 475 * this.state.windowsScale,
                        positionY: 13 * this.state.windowsScale,
                        angle: 0,
                        height: 100 * this.state.windowsScale,
                        picSrc: [man1, man2],
                        animationDuration: 500,
                        collisionBoxType: "rectangle", // rectangle, circular
                        collisionBoxWidth: 116 * this.state.windowsScale,
                        collisionBoxHeight: 100 * this.state.windowsScale,
                        // collisionBoxRadius: 120,
                        zIndex: 1,
                        picNum: 0,
                    },
                    leftHook: {
                        name: "左钩子",
                        positionX: (1024 * 0.5 - 20) * this.state.windowsScale,
                        positionY: 126 * this.state.windowsScale,
                        height: 20 * this.state.windowsScale,
                        collisionBoxWidth: 50 * this.state.windowsScale,
                        collisionBoxHeight: 50 * this.state.windowsScale,
                        angle: 0,
                        picSrc: [leftHook],
                        animationDuration: 500,
                        collisionBoxType: "rectangle", // rectangle, circular
                        // collisionBoxRadius: 120,
                        zIndex: 1,
                        picNum: 0,
                    },
                    rightHook: {
                        name: "右钩子",
                        positionX: (1024 * 0.5 + 20) * this.state.windowsScale,
                        positionY: (126 + 20) * this.state.windowsScale,
                        height: 20 * this.state.windowsScale,
                        collisionBoxWidth: 50 * this.state.windowsScale,
                        collisionBoxHeight: 50 * this.state.windowsScale,
                        angle: 0,
                        picSrc: [rightHook],
                        animationDuration: 500,
                        collisionBoxType: "rectangle", // rectangle, circular
                        // collisionBoxRadius: 120,
                        zIndex: 1,
                        picNum: 0,
                    },
                },
            };
        });
    }

    refreshObjState() {
        this.setState({
            objs: {
                objMan: {
                    ...this.state.objs.objMan,
                    positionX: 475 * this.state.windowsScale,
                    positionY: 13 * this.state.windowsScale,
                    height: 100 * this.state.windowsScale,
                    collisionBoxWidth: 116 * this.state.windowsScale,
                    collisionBoxHeight: 100 * this.state.windowsScale,
                },
                leftHook: {
                    ...this.state.objs.leftHook,
                    positionX: (1024 * 0.5 - 20) * this.state.windowsScale,
                    positionY: 126 * this.state.windowsScale,
                    height: 20 * this.state.windowsScale,
                    collisionBoxWidth: 50 * this.state.windowsScale,
                    collisionBoxHeight: 50 * this.state.windowsScale,
                },
                rightHook: {
                    ...this.state.objs.rightHook,
                    positionX: 1024 * 0.5 * this.state.windowsScale,
                    positionY: 126 * this.state.windowsScale,
                    height: 20 * this.state.windowsScale,
                    collisionBoxWidth: 50 * this.state.windowsScale,
                    collisionBoxHeight: 50 * this.state.windowsScale,
                },
            },
        });
    }

    render() {
        console.log(this.state);
        const ropePositionX = 512 * this.state.windowsScale;
        const ropePositionY = 80 * this.state.windowsScale;
        let ropeWidth = 50;
        const ropeAngle = (() => {
            const { positionX, positionY } = this.state.objs?.rightHook || {
                positionX: ropePositionX,
                positionY: ropePositionY,
            };
            const deltaX = positionX - ropePositionX;
            const deltaY = positionY - ropePositionY;
            if (deltaX === 0) {
                if (positionY > ropePositionY) return 90;
                return 270;
            }
            if (deltaY === 0) {
                if (positionX > ropePositionX) return 0;
                return 180;
            }
            ropeWidth = Math.sqrt(deltaX * deltaX + deltaY * deltaY) + 1;
            return (180 * Math.atan(deltaY / deltaX)) / Math.PI;
        })();
        return (
            <div>
                <button
                    onClick={() => {
                        this.setState({
                            showCollisionBox: !this.state.showCollisionBox,
                        });
                    }}
                >
                    开关碰撞箱
                </button>
                <button
                    onClick={() => {
                        this.setState(
                            {
                                windowsScale: this.state.windowsScale + 0.1,
                            },
                            () => {
                                this.refreshObjState();
                            }
                        );
                    }}
                >
                    +
                </button>
                <button
                    onClick={() => {
                        this.setState(
                            {
                                windowsScale: this.state.windowsScale - 0.1,
                            },
                            () => {
                                this.refreshObjState();
                            }
                        );
                    }}
                >
                    -
                </button>
                <div
                    className="guan-qia"
                    style={{
                        width: `${windowsWidth * this.state.windowsScale}px`,
                        height: `${windowsHeight * this.state.windowsScale}px`,
                    }}
                >
                    <Obj
                        {...(this.state.objs?.objMan || {})}
                        showCollisionBox={this.state.showCollisionBox}
                    />
                    <Obj
                        {...(this.state.objs?.leftHook || {})}
                        showCollisionBox={this.state.showCollisionBox}
                    />
                    <Obj
                        {...(this.state.objs?.rightHook || {})}
                        showCollisionBox={this.state.showCollisionBox}
                    />
                    <span
                        className="绳子"
                        style={{
                            display: "inline-block",
                            position: "absolute",
                            boxSizing: "border-box",
                            backgroundColor: "black",
                            height: `${2 * this.state.windowsScale}px`,
                            width: `${ropeWidth * this.state.windowsScale}px`,
                            left: ropePositionX,
                            top: ropePositionY,
                            transformOrigin: "0 0",
                            transform: `rotate(${ropeAngle}deg)`,
                        }}
                    />
                </div>
            </div>
        );
    }
}

export default GuanQia;
